<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
</head>
<body>
<div id="app">
  <h1>解决全选的bug</h1>
  <table border="1" cellspacing="0" cellpadding="10">
    <thead>
      <tr>
        <th>全选</th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="goods in goodsList" :key="goods.id">
        <td>
          <input type="checkbox" @change="onInputChnage" v-model="goods.checked" />
        </td>
        <td>
          <img :src="'./images/' + goods.img" alt="" width="100" height="100" />
          {{ goods.name }}
        </td>
        <td>
          {{ goods.price }}
        </td>
        <td>
          <button :disabled="goods.num === 0" @click="goods.num--">-</button>
          <input type="number" v-model="goods.num" style="width: 40px;" />
          <button @click="addGoods(goods.id)">+</button>
        </td>
        <td>
          {{ goods.num * goods.price }}
        </td>
        <td>
          <button @click="deleteGoods(goods.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <footer style="display: flex; margin-top: 20px;">
    <button>合计：{{ total }}</button>
    <input type="checkbox" @change="allCheckedInputChange" v-model="allChecked" />
    <label>{{ allChecked ? '非全选' : '全选'  }}</label>
  </footer>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      allChecked: false,
      title: '添加删除功能',
      goodsList: [
        {
          name: 'Casio/卡西欧 EX-TR350',
          img: 'Casio-1.jpg',
          price: 1,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Canon/佳能 powerShotSX50 HS',
          img: 'Canon-2.jpg',
          price: 2,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Sony/索尼 DSC-WX300',
          img: 'Sony-3.jpg',
          price: 3,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: 'Fujifi1m/富士 instax mini 25',
          img: 'Fujifi1m-4.jpg',
          price: 4,
          num: 1,
          id: Math.random(),
          checked: false,
        },
        {
          name: '康奈尔ssr-p',
          img: 'ssr-5.jpg',
          price: 5,
          num: 1,
          id: Math.random(),
          checked: false,
        },
      ],
    },

    computed: {
      total() {
        return this.goodsList.reduce(function(total, prev) {
          return total + (prev.checked ? prev.price * prev.num : 0)
        }, 0)
      },
    },

    methods: {
      allCheckedInputChange(e) {
        val = e.target.checked
        this.goodsList = this.goodsList.map(goods => {
          return {
            name: goods.name,
            img: goods.img,
            price: goods.price,
            num: goods.num,
            id: goods.id,
            checked: val,
          }
        })
      },

      onInputChnage() {
        this.allChecked = this.goodsList.every(goods => {
          return goods.checked
        })
      },
      deleteGoods(id) {
        const index = this.goodsList.findIndex(function(goods) {
          return goods.id === id
        })
        this.goodsList.splice(index, 1)
      },

      addGoods(id) {
        const index = this.goodsList.findIndex(function(goods) {
          return goods.id === id
        })
        const goods = this.goodsList[index]
        const newGoods = {
          name: goods.name,
          img: goods.img,
          price: goods.price,
          num: goods.num + 1,
          id: goods.id,
          checked: goods.checked,
        }
        this.goodsList.splice(index, 1, newGoods)
      },
    },
  })
</script>
</body>
</html>